<template>
    <div>
      <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/user/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>人员管理</el-breadcrumb-item>
        <el-breadcrumb-item>梦之队成员</el-breadcrumb-item>
      </el-breadcrumb>
      <!--卡片视图区-->
      <el-card >
        <el-row>
          <el-col :span="7">
            <template>
              <el-select v-model="page.searchGroupName" filterable clearable placeholder="分组筛选" @change="reSetPage()"
                         @clear="reSetUserList()">
                <el-option
                  v-for="item in groupList"
                  :key="item.groupId"
                  :label="item.groupName"
                  :value="item.groupName">
                </el-option>
              </el-select>
            </template>
          </el-col>
        </el-row>


        <el-table :data="userList" border stripe >
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="学号">
            <template slot-scope="scope">
              <span style="color:#67C23A" size="medium"><i class="el-icon-s-opportunity"></i>{{ scope.row.userId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" >
            <template slot-scope="scope">
              <span style="margin-left: 10px;color:#CC9999" v-show="scope.row.userAuthority=='1'"><i class="el-icon-user-solid"></i>{{scope.row.userName}}</span>
              <span style="margin-left: 10px; color:#CC9999" v-show="scope.row.userAuthority=='0'"><i class="el-icon-user" ></i>{{scope.row.userName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属组" prop="group">
            <template slot-scope="scope">
                <span style="color:#F56C6C" v-if="scope.row.group == '还未加入任何分组'">
                  {{scope.row.group}}
                </span>
              <span style="color:#409EFF" v-else>
                  <i class="el-icon-s-home"></i>
                  {{scope.row.group}}
                </span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话">
            <template slot-scope="scope">
              <span style="color:#E6A23C"  size="medium">
                <i class="el-icon-phone"></i>
                {{ scope.row.phone }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="码云账号">
            <template slot-scope="scope">
              <span style="margin-left: 10px ;color:#99CCCC" size="medium">
                <i class="el-icon-s-platform"></i>
                {{ scope.row.codeAccount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="用户状态">
            <template slot-scope="scope">
              <!--后台返回的是true或者false-->
              <span style="color:#67C23A" size="medium" v-if="scope.row.userStatus">
                在职
              </span>
              <span style="color:#F56C6C" size="medium" v-else>
                离职
              </span>
            </template>
          </el-table-column>

        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[8,9, 10, 11, 12]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>


      </el-card>


    </div>
</template>

<script>
    export default {
        name: "UserList",
       data(){
          return{
            page:{
              //当前的页数
              pageNum: 1,
              //每页显示多少条数据
              pageSize: 8,
              searchGroupName: ''
            },
            userList: [],  //用户列表
            groupList: [],    //组列表
            total: 0
          }
       },
      created() {
        this.getUserList();
        this.getGroupList();
      },
      methods: {
        reSetUserList(){
          this.page.pageNum = 1;
          this.page.pageSize = 8;
          this.getUserList();
        },
        async getUserList(){
          //发起get
          const {data: res} = await this.$http.get('user/getUserList',{
            params: {
              pageNum: this.page.pageNum,
              pageSize: this.page.pageSize
            }
          });
          if (res.status != 200){
            return this.$message.error(res.msg);
          }
          //获取后端的用户数据
          this.userList = res.data.userList; //用户类表
          this.total = res.data.total;   //总数

        },
        async getGroupList(){
          //发起get请求
          const {data: res} = await this.$http.get('teamGroup/getGroups');
          if (res.status != 200){
            return this.$message.error(res.msg);
          }
          //获取后端组数据
          console.log(res);
          this.groupList = res.data;
        },
        handleSizeChange(newPageSize){
          //更新没页的条数
          this.page.pageSize = newPageSize;
          this.getUserList();
        },
        handleCurrentChange(newPage){
          //更新页码
          this.page.pageNum = newPage;
          this.getUserList();
        },
        reSetPage(){
          this.page.pageNum = 1;
          this.page.pageSize = 8;
          this.getUserListByGroupName();
        },
        async getUserListByGroupName(){
          const {data: res} = await this.$http.get("group/getGroupUserInfoByGroupName",{
            params: {
              groupName: this.page.searchGroupName,
              pageNum: this.page.pageNum,
              pageSize: this.page.pageSize
            }
          });
          console.log(res)
          if (res.status != 200){
            return this.$message.error(res.msg);
          }
          this.userList = res.data.groupList;
          this.total = res.data.total;   //总数

        },

      }
    }
</script>

<style scoped>

</style>
